$(function () {

  var frequency = 1000 * 10;

  // initAssetOnlineTrendStats();
  initAssetTop5();
  initServiceTimeStats();

  function initAssetOnlineTrendStats() {
    var chart = echarts.init(document.getElementById('asset-online-trend-stats'));
    update([], [])
    function update(d1, d2) {
      var option = {
        color: ['#B5C3DE'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: '10px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: d1, //['12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#66CCFF'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            axisLabel: {
              color: '#66CCFF'
            }
          }
        ],
        series: [
          {
            name: '在线',
            type: 'bar',
            barWidth: '30%',
            label: {
              show: true,
              position: 'inside'
            },
            data: d2 //[10, 52, 200, 334, 390, 330, 220]
          },
          {
            name: '在线数量',
            type: 'line',
            smooth: true,
            data: d2
          }
        ]
      };
      chart.setOption(option, true);
    }
    req()
    setInterval(req, frequency)
    function req() {
      $.get('/api/w/leader/asset/trend', function (res) {
        var data = res.data.sort(function (a, b) { return new Date(a.date).getTime() - new Date(b.date).getTime() });
        var d1 = [], d2 = [];
        for (var i = 0; i < data.length; i++) {
          d1.push(data[i].date.substring(5))
          d2.push(data[i].count)
        }
        update(d1, d2)
      })
    }

  }

  function initAssetTop5() {
    var chart = echarts.init(document.getElementById('asset-top5-stats'));
    update([], [], [])
    function update(d1, d2, d3) {
      var option = {
        color: ['#FF6666', '#B5C3DE'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: '10px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#66CCFF'
            },
            splitLine: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: d1,
            splitLine: { show: false },
            axisLabel: {
              color: '#66CCFF'
            }
          }
        ],
        series: [
          {
            name: '在线',
            type: 'bar',
            stack: '总量',
            barWidth: '30%',
            // label: {
            //   show: true,
            //   position: 'insideRight'
            // },
            data: d2
          },
          {
            name: '不在线',
            type: 'bar',
            stack: '总量',
            barWidth: '30%',
            // label: {
            //   show: true,
            //   position: 'insideRight'
            // },
            data: d3
          }
        ]
      };
      chart.setOption(option, true);
    }
    req()
    setInterval(req, frequency)
    function req() {
      $.get('/api/w/leader/asset/top5', function (res) {
        var d1 = [], d2 = [], d3 = [];
        for (var i = 0; i < res.data.length; i++) {
          if(res.data[i].name) {
            d1.push(res.data[i].name)
            // d2.push(res.data[i].online)
            // d3.push(res.data[i].count - res.data[i].online)
            d2.push(res.data[i].count)
            d3.push(0)
          }
        }
        update(d1, d2, d3)
      })
    }

  }

  function initServiceTimeStats() {
    var chart = echarts.init(document.getElementById('service-time-stats'));
    update([])
    function update(data) {
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '服务占比',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            data: data
          }
        ]
      };
      chart.setOption(option, true);
    }
    req()
    setInterval(req, frequency)
    function req() {
      $.get('/api/w/leader/malfunction/stats', function (res) {
        update(res.data)
      })

    }
  }
})